<template>
	<view>
		<!-- 搜索框组件 -->
		<view class="u_search">
			<view class="">
				<search></search>
			</view>
		</view>
		<view class="list">
			<!-- 一级分类 -->
			<view class="one_list">
				<view @click="goTwo(index)" v-for="(item,index) in oneList" :key="item.id" class="one_v">
					<view :class="active==index?'active':'' ">
						{{item.catename}}
					</view>
				</view>
			</view>
			<!-- 二级分类 -->
			<view class="two_list">
				<view class="goods_box">
					<view class="goods_img" >
						<view class="circle_all" @click="goDetail(item.id)" v-for="item in twoList" :key="item.id">
							<view class="circle">
								<image :src="item.img" mode=""></image>
							</view>
							<view class="">
								{{item.catename}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// 引入搜索组件
	import search from '@/components/search/search.vue'
	// 引入封装好的接口
	import {
		getCates
	} from '@/request/app.js'
	export default {
		data() {
			return {
				oneList: [], //一级分类列
				twoList: [] ,//二级分类商品
				active:''
			}
		},
		methods: {
			// 二级分类  点击一级切换二级商品
			goTwo(index) {
				console.log(index, "下标")
				this.twoList = this.oneList[index].children.map(item => ({
					catename: item.catename,
					id: item.id,
					img: this.$imgUrl + item.img
				}))
				console.log(this.twoList, "二级分类商品");
				this.active = index
			},
			goDetail(id){
				uni.navigateTo({
					url:'../goodsList/goodsList?cateid='+id
				})
			}
		},
		onLoad(opation) {
			// 分类页左侧列
			getCates()
				.then(res => {
					console.log(res, "一级分类页");
					if (res.data.code == 200) {
						this.oneList = res.data.list
						// 二级分类商品
						this.goTwo(0)
					}
					console.log(this.oneList, '一级分类响应');
				})
		},
		components: {
			search
		}
	}
</script>

<style lang="less">
	.u_search {
		width: 100%;
		height: 60px;
		line-height: 60px;
		background-color: tomato;

		view {
			width: 360px;
			margin: auto;
		}
	}

	.list {
		width: 100%;
		background-color: #eee;
		display: flex;

		.one_list {
			width: 200px;
			padding: 20px;
			text-align: center;
			box-sizing: border-box;
			background-color: #fff;
			color: #999;

			.one_v {
				height: 45px;
				line-height: 45px;
				// margin-bottom: 30px;
				.active{
					height: 45px;
					background-color: tomato;
					color: #fff;
					font-weight: bold;
				}
			}
		}

		.two_list {
			flex: 1;
			padding: 15px;
			box-sizing: border-box;

			.goods_box {
				width: 240px;
				height: 240px;
				background-color: #fff;
				padding: 10px;
				box-sizing: border-box;

				.circle {
					width: 50px;
					height: 50px;
					overflow: hidden;
					border-radius: 50%;

					image {
						width: 50px;
						height: 50px;
					}
				}

				.goods_img {
					display: flex;
					flex-wrap: wrap;
					text-align: center;

					.circle_all {
						margin-right: 20px;
						margin-bottom: 20px;
					}
				}
			}
		}
	}
</style>
